<template>
  <div class="step-one">
    <question-tree @changeTree="changeTree" />
    <el-card style="width: 40%;margin:0 10px;">
      <h3 class="title">决策预案知识推荐</h3>
      <div style="display:flex;">
        <span>关键词：</span>
        <el-input v-model="queryParams.taskName" clearable suffix-icon="el-icon-search" type="text" @change="changeInput" />
        <el-button type="text" @click="getData">高级检索</el-button>
      </div>
      <h4 class="list-menu">决策预案模板列表</h4>
      <h5 class="guan-yu">关于“<em>{{ queryParams.taskName || 'xxx' }}</em>“知识库推荐预案</h5>
      <div v-loading="loading" class="list-group">
        <div v-for="({problemDescription,taskTarget},i) in dataList" :key="i" class="list-item">
          <el-card style="height:150px;" :style="{'background-color':(checked == i ? '#DCF3FD' : '#fff')}">
            <div :id="`title${i}`" class="item-title" />
            <div class="item-scene">问题场景：{{ problemDescription }}</div>
            <div class="item-target">策略目标：{{ taskTarget }}</div>
            <el-button type="primary" class="item-btn" @click="watchDetails(i)">详情</el-button>
            <el-checkbox v-model="checkList[i]" class="item-check" @change="watchDetails(i)" />
          </el-card>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pageChange"
        />
      </div>
    </el-card>
    <el-card style="width: 57%;">
      <h3 class="title">决策预案基本信息</h3>
      <el-form ref="form" :model="form" label-width="230px" center :rules="rules">
        <el-form-item label="预案名称：" prop="taskName">
          <el-input v-model="form.taskName" style="width:450px;" />
        </el-form-item>

        <el-form-item label="问题场景：" prop="sceneId">
          <el-select v-model="form.sceneId" style="width:450px;" placeholder="请选择活动区域">
            <el-option
              v-for="dict in dict.type.rts_scene_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="问题地点：" prop="problemArea">
          <el-input v-model="form.problemArea" placeholder="请输入问题地点" style="width:450px;" type="textarea" />
          <!-- <el-select v-model="form.problemArea" style="width:450px;" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="问题描述：">
          <el-input v-model="form.problemDescription" style="width:450px;" type="textarea" />
        </el-form-item>
        <el-form-item label="预案目标：">
          <el-input v-model="form.taskTarget" style="width:450px;" />
        </el-form-item>
        <el-form-item label="开始时间：">
          <el-date-picker
            v-model="form.addTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:450px;"
          />
        </el-form-item>
        <el-form-item label="结束时间：">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:450px;"
          />
        </el-form-item>
        <el-form-item label="预案详情：">
          <el-input v-model="form.description" type="textarea" style="width:450px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(1)">立即配置优化策略</el-button>
          <el-button @click="onSubmit(2)">选择调度员并下发</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>

import questionTree from '@/components/createPlan/questionTree'
import { listTask, addTask } from '@/api/decision/task'
import { deepClone } from '@/utils/index'
export default {
  components: {
    QuestionTree: questionTree
  },
  dicts: ['rts_scene_type'],
  data() {
    return {
      keyWord: '',
      word: '12',
      form: {
        addTime: '',
        taskName: '',
        endTime: '',
        sceneId: '',
        problemArea: '', // 问题地点
        problemDescription: '', // 问题描述
        taskTarget: '', // 预案目标
        description: '', // 预案描述
        addUser: '' // 创建人
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskName: null,
        userId: ''
      },
      loading: false,
      total: 10,
      checked: null,
      checkList: [],
      dataList: [],
      rules: {
        taskName: [
          { required: true, message: '请输入预案名称', trigger: 'blur' }
        ],
        sceneId: [
          { required: true, message: '请选择问题场景', trigger: 'change' }
        ],
        problemArea: [
          { required: true, message: '请输入问题地点', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userId() {
      return this.$store.state.user.userId
    }
  },
  mounted() {
    this.queryParams.userId = this.userId
    this.getData()
  },
  methods: {
    watchDetails(i) {
      for (let i = 0; i < this.checkList.length; i++) {
        this.checkList[i] = false
      }
      this.checkList[i] = true
      this.checked = i
      this.form = deepClone(this.dataList[i])
    },
    changeTree(val) {
      this.queryParams.taskName = val.name
      this.getData()
    },
    changeInput() {
      this.$store.commit('plan/SET_TREE_NODE', { name: this.queryParams.taskName })
      this.getData()
    },
    changeKeyRed(str, keyWord) {
      if (str != null && keyWord != null) {
        var substr = '/' + keyWord + '/g'
        var replaceStr = str.replace(eval(substr), "<span style='color:red;font-weight:bold'>" + keyWord + '</span>')
        return replaceStr
      } else {
        return str
      }
    },
    getData() {
      this.loading = true
      listTask(this.queryParams).then(response => {
        this.loading = false
        this.checkList = []
        this.dataList = response.rows
        this.dataList.forEach((element, i) => {
          this.$nextTick(() => {
            document.getElementById(`title${i}`).innerHTML = this.changeKeyRed(element.taskName, this.queryParams.taskName)
          })
          this.checkList.push(false)
        })
        this.total = response.total
      })
    },
    pageChange(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getData()
    },
    onSubmit(i) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addTask(this.form).then(response => {
            localStorage.setItem('planParam', JSON.stringify(response.data))
            this.$router.push({ path: '2', query: {
              id: i
            }})
          })
        } else {
          this.$message.error('请补充表单')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.step-one{
  display: flex;
  width: 100%;
  justify-content: center;
  .title{
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
  }
  span{
    padding: 5px 0;
    width: 120px;
    text-align: right;
  }
  .list-menu{
    font-size: 20px;
    color: #333;
  }

  .guan-yu{
    font-size: 18px;
    color: #666;
    em{
      color:crimson;font-style: normal;
    }
  }

  .list-item{
    position: relative;
    width: 98%;
    margin-bottom: 20px;
    .item-check{
      position: absolute;
      right: 10px;
      top: 10px;
    }
     .item-title{
      font-size: 18px;
      font-weight: 600;
    }
    .item-btn{
      position: absolute;
       right: 10px;
      bottom: 10px;
    }
    .active{
      background: rgb(76, 190, 110);
    }
  }
}
</style>
